<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { useRenderIcon } from '@/components/ReIcon/src/hooks'
import { z } from 'zod'
import intro from './component/intro.vue'
import trial from './component/trial.vue'

import IconShare from '@iconify-icons/ep/share'
import useApiDetail from './useApiDetail'
import useDictStore from '@/store/modules/dict'
import useRouteQuery from '@/hooks/useRouteQuery'
import { getToken } from '@/utils/auth'
import { message } from '@/utils/message'

const activeTab = ref('intro')

const querySchema = z.object({
  id: z.string(),
})
const query = useRouteQuery(querySchema)
const { data, loading, getData } = useApiDetail()
const { api_catalog, api_type } = useDictStore().getDicts('api_catalog', 'api_type')

getData(query.id)

const route = useRoute()
const router = useRouter()
const routeTo = function routeToAddCall() {
  const token = getToken()
  if (!token) {
    router.push({
      path: '/login',
      query: {
        redirect: '/app-manage/list',
      },
    })
  } else {
    router.push({
      path: '/app-manage/list',
    })
  }
}

function copyUrlToClip() {
  var aux = document.createElement('input')
  aux.setAttribute('value', window.location.href)
  document.body.appendChild(aux)
  aux.select()
  document.execCommand('copy')
  document.body.removeChild(aux)
  message('分享链接已复制至剪贴板', { type: 'info' })
}
</script>

<template>
  <div v-loading="loading" class="p-8 space-y-8">
    <el-card>
      <div class="flex gap-8 relative">
        <i class="absolute right-0 top-0">
          <el-tooltip content="分享">
            <el-button
              text
              type="primary"
              :icon="useRenderIcon(IconShare)"
              @click="copyUrlToClip()"
            />
          </el-tooltip>
        </i>
        <i class="absolute right-10 top-0">
          <el-tooltip content="返回">
            <el-button text type="primary" @click="router.back()">返回</el-button>
          </el-tooltip>
        </i>
        <div class="aspect-square h-[198px] bg-neutral-300">
          <el-image fit="cover" class="h-full w-full" :src="data.apiIconPth" />
        </div>
        <div class="flex flex-col justify-between items-start text-neutral-500">
          <h3 class="text-black">{{ data.apiName }}</h3>
          <p>{{ data.apiDesc }}</p>
          <table>
            <colgroup>
              <col />
              <col width="160" />
              <col />
              <col />
            </colgroup>
            <tbody>
              <tr>
                <td>接口分类：</td>
                <td>{{ api_catalog.getLabel(data.apiCatalog) }}</td>
                <td>接口类型：</td>
                <td>{{ api_type.getLabel(data.apiType) }}</td>
              </tr>
              <tr>
                <td>更新时间：</td>
                <td>{{ data.updateTime }}</td>
                <td>调用次数：</td>
                <td>{{ data.callFreq }}</td>
              </tr>
            </tbody>
          </table>
          <el-button type="primary" size="large" class="rounded-none" @click="routeTo"
            >立即调用</el-button
          >
        </div>
      </div>
    </el-card>
    <main>
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="介绍" name="intro">
          <intro :data="data" />
        </el-tab-pane>
        <el-tab-pane label="在线体验" name="trial">
          <trial :data="data" />
        </el-tab-pane>
      </el-tabs>
    </main>
  </div>
</template>
